<template>
  <h1>hello vue3</h1>

  <A>
    <!-- 往组件标签内写的内容就是插槽 -->
    <!-- 默认插槽 -->
    <p>1111</p>
    <p>222</p>
    <p>333</p>
    <p>4444</p>
  </A>

  <B>
    <!-- 具名插槽 -->
    <template v-slot:header>
      <header>header</header>
    </template>
    <!-- 
      默认插槽 
        最重要的内容用默认插槽
        其他内容用具名插槽
    -->
    <p>1111</p>
    <p>222</p>
    <p>333</p>
    <p>4444</p>

    <template #footer>
      <footer>footer</footer>
    </template>
  </B>

  <C>
    <!-- 作用域插槽：子组件C向父组件App传递数据 -->
    <template v-slot="{ count }">
      <p>1111</p>
      <p>222 {{ count }}</p>
      <p>333</p>
      <p>4444</p>
    </template>

    <template #footer="{ count }">
      <footer>footer {{ count }}</footer>
    </template>
  </C>
</template>

<script lang="ts">
import { defineComponent } from "vue";

import A from "./A.vue";
import B from "./B.vue";
import C from "./C.vue";

export default defineComponent({
  name: "App",
  components: {
    A,
    B,
    C,
  },
});
</script>

<style scoped></style>
